<script>
import ElementItem from '@/components/FreeForm/design/form/form-group/element-item/index.vue'
import AddElement from '@/components/FreeForm/design/form/form-group/add-elements/index.vue'
import config from '@/components/FreeForm/minix/config'
import { deleteColumn, exchangeSort } from '@/api/form'
import FieldBatchConfig from '@/components/FreeForm/design/form/form-group/field-batch-config/index.vue'

export default {
  name: 'GroupCard',
  components: { FieldBatchConfig, AddElement, ElementItem },
  mixins: [config],
  props: {
    group: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      addShow: false,
      configShow: false
    }
  },
  methods: {
    handleAdd() {
      this.addShow = true
    },
    handleCloseAdd() {
      this.addShow = false
      this.$emit('refresh')
    },
    handleUp(element) {
      console.log('Up')
      this.changeElementOrder(element, 'up')
    },
    handleDown(element) {
      this.changeElementOrder(element, 'down')
    },
    changeElementOrder(element, mode) {
      const indexOf = this.group.elements.indexOf(element)
      let target = null
      if (mode === 'up') {
        if (indexOf > 0) {
          target = this.group.elements[indexOf - 1]
        }
      } else {
        if (indexOf < this.group.elements.length - 1) {
          target = this.group.elements[indexOf + 1]
        }
      }
      if (target) {
        exchangeSort({ sourceId: element.id, targetId: target.id }).then(() => {
          this.$message.success('排序成功')
          const source = element.orderNum
          element.orderNum = target.orderNum
          target.orderNum = source
          this.group.elements.sort((a, b) => {
            return a.orderNum - b.orderNum
          })
        })
      }
    },
    handleDelete(element) {
      deleteColumn(element.id).then(() => {
        this.$message.success('删除成功')
        this.group.elements.splice(this.group.elements.indexOf(element), 1)
        this.$emit('refresh')
        this.$forceUpdate()
      })
    },
    handleClickElement(element) {
      this.$emit('clickElement', element)
    },
    dynamicSaveGroup() {
      this.realtimeUpdateGroup(this.group)
    },
    handleBatchConfig() {
      this.configShow = true
    }
  }
}
</script>

<template>
  <el-card shadow="hover" style="margin-bottom: 5px">
    <el-form :model="group" label-width="60px" size="small" label-position="left">
      <el-form-item label="表单组名" prop="name">
        <el-input v-model="group.name" @blur="()=>dynamicSaveGroup()" />
      </el-form-item>
      <el-form-item label="组编码" prop="key">
        <el-input v-model="group.key" @blur="()=>dynamicSaveGroup()" />
      </el-form-item>
      <el-form-item label="表单类型" prop="type">
        <el-select v-model="group.type" placeholder="请选择表单类型" @change="()=> dynamicSaveGroup()">
          <el-option label="表单信息" value="form" />
          <el-option label="表单扩展" value="expansion" />
        </el-select>
      </el-form-item>
    </el-form>
    <el-row>
      <el-col :span="24">
        <div style="border-bottom: 1px solid #DCDFE6;width:100%;margin-bottom:7px;" />
      </el-col>
      <el-col :span="24">
        <el-button size="mini" type="primary" icon="el-icon-edit-outline" @click="handleAdd">添加</el-button>
        <el-button size="mini" icon="el-icon-edit-outline" @click="handleBatchConfig">配置</el-button>
        <el-button size="mini" icon="el-icon-delete">清空</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <element-item
          v-for="element in group.elements"
          :key="element.id"
          :element="element"
          @click-clement="handleClickElement(element)"
          @click-up="handleUp(element)"
          @click-down="handleDown(element)"
          @click-delete="handleDelete(element)"
        />
      </el-col>
    </el-row>
    <add-element
      :visible.sync="addShow"
      :form-id="group.formId"
      :group-id="group.id"
      @close="handleCloseAdd"
    />
    <field-batch-config
      :visible.sync="configShow"
      :elements="group.elements"
      @close="handleCloseAdd"
    />
  </el-card>
</template>

<style scoped lang="scss">

</style>
